<template>
  <PageWrapper>
    <template #headerContent> <WorkbenchHeader /> </template>
    <div class="lg:flex">
      <div class="lg:w-9/12 w-full !mr-4 enter-y">
        <corporateBillboard :loading="loading" class="enter-y" />
        <div class="2xl:flex w-full !mr-4 enter-y">
          <div class="2xl:w-3/10 w-full !mr-4 enter-y">
            <task :loading="loading" class="enter-y" />
          </div>
          <div class="2xl:w-4/10 w-full !mr-4 enter-y">
            <flow :loading="loading" class="enter-y" />
          </div>
          <div class="2xl:w-3/10 w-full enter-y">
            <approval :loading="loading" class="enter-y" />
          </div>
        </div>
      </div>
      <div class="lg:w-3/12 w-full enter-y">
        <QuickNav :loading="loading" class="enter-y" />
        <!-- 日程管理 -->
        <Calendar :loading="loading" class="enter-y" />
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import WorkbenchHeader from './components/WorkbenchHeader.vue';
  import QuickNav from './components/QuickNav.vue';
  import Calendar from './components/Calendar.vue';

  import corporateBillboard from './newComponents/corporateBillboard.vue';
  import task from './newComponents/task.vue';
  import flow from './newComponents/flow.vue';
  import approval from './newComponents/approval.vue';

  const loading = ref(true);

  setTimeout(() => {
    loading.value = false;
  }, 1500);
</script>
